<template>
<!--主容器-->
        <el-container class="el-main-class">
<!--            头部信息-->
            <el-header>
                <el-row style="height: 100%">
                    <el-col :span="1" style="height: 100%;">
                        <el-avatar :size="60"  :src="avatar"/>
                    </el-col>
                    <el-col :span="15" class="el-title">
                         个人运动管理平台---<span>管理员{{name}}</span>
                    </el-col>
                    <el-col :span="7" class="el-logout">
                        <el-button type="info" @click="logout">退出登录</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside :width="menuActive==true?'200px':'60px'">
                        <div class="el-menus-button" style="width :199px;" @click="menuActive=!menuActive">
                            <i class="el-icon-s-fold"/>
                        </div>
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            background-color="#545c64"
                            text-color="#fff"
                            unique-opened
                            router
                            :collapse="!menuActive"
                            active-text-color="#ffd04b">
<!--                        一级菜单-->
                        <el-submenu :index="index +''" v-for="(parentMenu,index) in menus" :key="index" >

                            <template slot="title">
                                <i :class="'iconfont'+parentMenu.icon+':before'" style="margin-right: 5px"/>
                                <span>{{parentMenu.title}}</span>
                            </template>


                               <el-menu-item :index="childrenMenu.path" v-for="(childrenMenu,i) in parentMenu.children" :key="i">
                                <template slot="title">
                                   <i :class="childrenMenu.icon" style="margin-right: 5px"></i>
                                   <span>{{childrenMenu.title}}</span>
                                </template>
                               </el-menu-item>


                        </el-submenu>
                    </el-menu>
                </el-aside>
<!--                主体-->
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item v-for="(item,index) in $router.currentRoute.matched" :key="index">{{item.meta.title}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <span v-show="$router.currentRoute.path ==='/'" class="el-main-title">欢迎来到个人运动管理平台</span>
                <router-view/>
                </el-main>
            </el-container>
        </el-container>

</template>
<script >
    import {mapState} from "vuex"
    export default {
    //    计算属性
        computed:{
            ...mapState(['name','avatar','menus'])
        },
        created() {
            console.log(this.name);
            console.log('菜单',this.menus);
        },
        name:'Home',
        data(){
        return {
            name:'admin',
            menuActive:true
        }
        },
        methods:{
            logout() {
                this.$confirm('您的操作将退出此系统, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/user/logout').then((res) => {
                        console.log(res)
                        this.$message.success(res.data.message);
                        //清空本地缓存
                        sessionStorage.clear();
                        //跳转页面
                        this.$router.replace({path: '/login'});
                        //刷新vuex中的数据
                        window.location.reload();
                    });
                }).catch(() => {
                    this.$message.info('操作已取消!');
                });
            }
        }

    }
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;

    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /*line-height: 160px;*/
    }
    /*主容器的样式*/
    .el-main-class{
        height: 100%;
        text-align: center;
    }
/*    头部样式*/
    .el-title{
        text-align: left;
        font-size: 25px;
        font-family: 华文行楷;
    }
/*    退出按钮样式*/
    .el-logout{
        text-align: right;
    }
/*    侧边栏按钮*/
    .el-menus-button {
        font-size: 20px;
        background-color: #545c64;
        color:#ffffff;
        cursor: pointer;
    }
    .el-main-title{
        margin-top: 20%;
        font-size: 50px;
        font-family: 华文行楷;
    }
    .el-submenu .el-menu-item{
        padding: 0;
    }
</style>
